<template>
    <div v-loading="loading">
        <div class="vs-table-box orderStatus">
            <div class="left_order_status">
                订单状态：
                <span v-if="orderType === 0">已作废</span>
                <span v-if="orderType === 1">待付尾款</span>
                <!-- <span v-if="orderType === 2">待消费</span> -->
                <span v-if="orderType === 3">已完成</span>
                <span v-if="orderType === 4">部分退款</span>
                <span v-if="orderType === 5">已退款</span>
                <span v-if="orderType === 6">待完成</span>
            </div>
            <div class="right_money" v-if="orderType == 1">
                <div>待付金额:{{ form.balance_meet_amount || 0 }}</div>
                <el-button type="primary" @click="goPay">去付尾款</el-button>
            </div>
        </div>
        <div class="vs-table-box" style="padding: 20px 100px" v-if="orderType == 5 || orderType === 4">
            <div class="tit" v-if="goodsType == 2">退货列表</div>
            <div></div>
            <el-table :data="form.refundList" border style="width: 100%" v-if="goodsType == 2">
                <el-table-column type="index" label="序号" align="center" width="100"> </el-table-column>
                <el-table-column prop="name" label="名称" align="center">
                    <template slot-scope="scope">
                        <div>
                            {{ scope.row.project_name || scope.row.goods_name || '' }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="price" label="单价" align="center"> </el-table-column>
                <el-table-column prop="return_number" label="数量" align="center"> </el-table-column>
                <el-table-column prop="address" label="金额" align="center">
                    <template slot-scope="scope">
                        <div>{{ scope.row.return_money }}</div>
                    </template>
                </el-table-column>
            </el-table>
            <div>
                <el-descriptions border :column="3" title="退货信息" style="margin-top: 20px">
                    <template v-for="item in form.return">
                        <el-descriptions-item :span="3" label="退货单号">{{ item.out_trade_no }}</el-descriptions-item>
                        <el-descriptions-item label="退款金额">￥{{ item.price }}</el-descriptions-item>
                        <el-descriptions-item label="退款方式">{{ payType[item.return_type] }}</el-descriptions-item>
                        <el-descriptions-item label="退款时间">{{ item.create_time }}</el-descriptions-item>
                        <el-descriptions-item :span="3" label="退款备注">{{ item.remarks }}</el-descriptions-item>
                    </template>
                </el-descriptions>
            </div>
        </div>
        <div class="vs-table-box" style="padding: 20px 100px">
            <el-descriptions border :column="3" title="顾客信息" style="margin-top: 20px" v-if="form.user">
                <el-descriptions-item label="姓名">{{ form.user.realname }}</el-descriptions-item>
                <el-descriptions-item label="性别" v-if="form.user.gender">{{ form.user.gender == 1 ? '男' : '女' }}</el-descriptions-item>
                <el-descriptions-item label="手机号">{{ form.user.phone }}</el-descriptions-item>
                <!-- 非会员订单不显示会员卡号 -->
                <el-descriptions-item label="会员卡号" v-if="form.user.vip_no">{{ form.user.vip_no }}</el-descriptions-item>
                <el-descriptions-item label="头围" v-if="form.user.vip_no">{{ form.user.header }}</el-descriptions-item>
                <el-descriptions-item label="前后" v-if="form.user.vip_no">{{ form.user.around }}</el-descriptions-item>
                <el-descriptions-item label="左右" v-if="form.user.vip_no">{{ form.user.about }}</el-descriptions-item>
            </el-descriptions>
            <div class="line"></div>

            <div class="tit">消费信息</div>
            <el-table :data="form.consumption" border style="width: 100%">
                <el-table-column type="index" label="序号" align="center" width="70"> </el-table-column>
                <el-table-column label="名称" align="center" min-width="110" show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{ scope.row.project_name || utils.productNameFiltering(scope.row) }}
                    </template>
                </el-table-column>
                <el-table-column label="商品类型" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.project_id">服务项目</span>
                        <span v-else>{{ scope.row.goods.type | goodsType }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="price" label="单价" align="center"> </el-table-column>
                <el-table-column prop="number" label="数量" align="center"> </el-table-column>
                <el-table-column prop="discount_rate" label="折扣率" align="center"> </el-table-column>
                <el-table-column prop="discount_amount" label="折扣价" align="center">
                    <template slot-scope="scope">
                        <!-- <span v-if="scope.row.discountPrice!=scope.row.discount_amount">
                            原({{scope.row.discountPrice}})修改成{{scope.row.discount_amount}}
                        </span>
                        <span v-else> -->
                        {{ scope.row.discount_amount }}
                        <!-- </span> -->
                    </template>
                </el-table-column>
                <el-table-column prop="discount_amount" label="折后价" align="center">
                    <template slot-scope="scope">
                        {{ (scope.row.price - scope.row.discount_amount).toFixed(2) }}
                    </template>
                </el-table-column>
                <el-table-column label="员工" align="center" min-width="200" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <div v-for="item in form.commission" :key="item.id" class="vs-span-empty">
                            <span v-if="item.project_id == scope.row.id || item.goods_id == scope.row.id">{{ rtUser(item.staff_id) }}</span>
                            <span>{{ item.type == 1 ? '销售提成' : '安装提成' }}</span>
                            <span>{{ item.value }}{{ item.is_type == 1 ? '元/次' : '%' }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="售后服务" v-if="form.user" align="center" width="120">
                    <template slot-scope="scope">
                        <div v-if="scope.row.return_status == 2" style="color: #02a7f0">已退款</div>
                        <div v-else style="color: #02a7f0; cursor: pointer" @click="tk(scope.row)">
                            {{ scope.row.return_status == 0 ? '退款' : '部分退款' }}
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="money">
                <div>
                    商品总价：<span>￥{{ form.total || '0.00' }}</span>
                </div>
                <div>
                    商品应付总价：<span>￥{{ form.orders_payable || '0.00' }}</span>
                </div>
                <!-- <div v-if=" goodsType == 1 && orderType == 3">尾款金额：<span style="color:red">￥1200</span></div> -->
                <div v-if="orderType == 1">
                    预付金额：<span style="color: red">￥{{ form.advance_amount }}</span>
                </div>
                <div v-if="form.discount_amount">
                    折扣价：<span style="color: red">￥{{ form.discount_amount }}</span>
                </div>
                <div>
                    实付金额：<span style="color: red">￥{{ form.paid_amount }}</span>
                </div>
            </div>
            <div class="line"></div>
            <el-descriptions border :column="3" title="订单信息" style="margin-top: 20px">
                <el-descriptions-item :span="3" label="订单编号">{{ form.out_trade_no }}</el-descriptions-item>

                <!-- 预付款 -->
                <template v-if="form.advance_time">
                    <el-descriptions-item label="预付金额">￥{{ form.advance_amount || '0.00' }}</el-descriptions-item>
                    <el-descriptions-item label="支付方式">{{ payTypeFilters(form.ordersPayType, 2) }}</el-descriptions-item>
                    <el-descriptions-item label="支付时间">{{ form.advance_time }}</el-descriptions-item>
                </template>

                <!-- 付尾款 -->
                <template v-if="form.balance_time">
                    <el-descriptions-item label="尾款金额"> ￥{{ form.balance_amount || '0.00' }} </el-descriptions-item>
                    <el-descriptions-item label="支付方式"> {{ payTypeFilters(form.ordersPayType, 3) }} </el-descriptions-item>
                    <el-descriptions-item label="支付时间">{{ form.balance_time }}</el-descriptions-item>
                </template>

                <!-- 全款时 -->
                <template v-if="!form.advance_time && !form.balance_time">
                    <el-descriptions-item label="全款金额">￥{{ form.pay_amount || '0.00' }}</el-descriptions-item>
                    <el-descriptions-item label="支付方式"> {{ payTypeFilters(form.ordersPayType, 1) }} </el-descriptions-item>
                    <el-descriptions-item label="支付时间">{{ form.pay_time }}</el-descriptions-item>
                </template>

                <el-descriptions-item :span="3" label="是否赠送服务次数">{{ form.is_consumption == 1 ? '是' : '否' }}</el-descriptions-item>
                <el-descriptions-item :span="3" label="订单备注">{{ form.remarks }}</el-descriptions-item>
            </el-descriptions>
            <div class="vs-bottom-btns">
                <el-button @click="utils.backPage()">返回</el-button>
                <!-- <el-button @click="subitm" :loading="isBtn" type="primary">审核</el-button> -->
            </div>
        </div>
        <el-dialog :visible.sync="dialogVisible" width="500px" :before-close="dialogBeforeClose">
            <div slot="title" class="dialog_tit">退款</div>
            <div style="padding: 0 40px">
                <el-form ref="form" :model="tkForm" label-width="80px" v-if="form.user">
                    <el-form-item label="会员卡号:">
                        {{ utils.useOptionChain(form, 'user.vip_no') }}
                    </el-form-item>
                    <el-form-item label="姓名:">
                        {{ utils.useOptionChain(form, 'user.realname') }}
                    </el-form-item>
                    <el-form-item label="手机号:">
                        {{ utils.useOptionChain(form, 'user.phone') }}
                    </el-form-item>
                    <el-form-item label="退款时间:">
                        {{ date }}
                    </el-form-item>
                    <el-form-item label="退款金额:">
                        <div style="width: 200px; display: flex">
                            <el-input v-enter-money v-model="tkForm.price" @blur="tkForm.price > tkMaxPrice ? (tkForm.price = tkMaxPrice) : ''" placeholder=""></el-input>
                            <span style="margin-left: 5px">元</span>
                        </div>
                    </el-form-item>
                    <el-form-item label="退款备注:">
                        <div style="width: 300px">
                            <el-input type="textarea" v-model="tkForm.remarks" :rows="4" placeholder=""></el-input>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" :loading="isBtn2" @click="tkMoney()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                date: new Date(),
                input4: '',
                demandIndex: 0,
                tableData: [{}],
                dialogVisible: false,
                isBtn: false,
                payType: ['', '微信支付', '支付宝支付', '银行卡', '现金', '余额', '赠送次数抵扣'],
                goodsType: '', //1特殊商品 2.普通商品
                orderType: '', //1.已完成  2.待付尾款  3.已退款  4.退款
                // 1: 待结尾款   2: 待消费  3: 已完成   4: 部分退款   5: 已退款，6待完成
                loading: false,
                isBtn2: false,
                dialogVisible2: false,
                loading2: false,
                demandList: [],
                paging: {
                    keys: '',
                    date: '',
                    user_id: '',
                    start_time: '',
                    stop_time: '',
                    store_id: '',
                    status: '',
                    type: '',
                    id: '',
                    page: 1,
                    total: 0,
                    limit: 10,
                },
                form: {
                    user: {
                        vip_no: '',
                    },
                },
                tkMaxPrice: 0,
                tkForm: {
                    orders_id: '',
                    data: '',
                    remarks: '',
                    price: '',
                },
                userList: [],
            };
        },
        filters: {
            goodsType(val) {
                let arr = ['', '毛坯', '成品', '积分商品', '洗护商品', '其他'];
                return arr[val];
            },
        },
        created() {
            let { id, type } = this.$route.query;
            if (id) {
                this.getOrderInfo(id);
                this.getStaff();
            }
        },
        mounted() {
            let _this = this; // 声明一个变量指向Vue实例this，保证作用域一致
            this.timer = setInterval(() => {
                let date = new Date(); // 修改数据date
                _this.date = date.toLocaleDateString() + '  ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
            }, 1000);
        },
        beforeDestroy() {
            if (this.timer) {
                clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
            }
        },
        methods: {
            payTypeFilters(val, type) {
                if (!val || val.length == 0) return '';
                let list = [];
                val.forEach((v) => {
                    if (v.orders_pay_type == type || (type == 1 && v.orders_pay_type == null)) {
                        list.push(v.type);
                    }
                });
                let arr = list.map((v) => this.payType[v]);
                return arr.join(',');
            },
            handleDemand(e) {
                this.demandIndex = e.id;
            },
            //去付尾款
            async goPay(type) {
                // if (type == 2) {
                //     if (!this.demandIndex) return this.$message.error('请选择要货单')
                //     this.utils.goUrl(`/cashier?user_id=${this.form.user.id}&order_id=${this.form.id}&demandNote=${this.demandIndex}`)
                //     return
                // }
                // if (this.form.type == 1) {
                //     this.dialogVisible2 = true;
                //     this.paging.user_id = this.form.user_id;
                //     this.demandIndex = "";
                //     this.reset();
                //     return;
                // }
                this.utils.goUrl(`/cashier?user_id=${this.form.user.id}&order_id=${this.form.id}`);
            },
            reset() {
                //重置
                this.paging = Object.assign(this.$options.data().paging, { user_id: this.form.user_id });
                this.handleCurrentChange(1);
            },
            handleCurrentChange(val) {
                this.paging.page = val;
                this.specialLists();
            },
            async specialLists() {
                this.loading2 = true;
                let { code, data } = await this.$Http.specialLists(this.paging);
                this.loading2 = false;
                if (code) {
                    this.demandList = data.data;
                    this.paging.total = data.total;
                }
            },
            timeChange(t) {
                if (t < 10) {
                    return '0' + t;
                } else {
                    return t;
                }
            },
            //退款
            async tkMoney() {
                if (!this.tkForm.price) {
                    return this.$message.warning('请输入退款金额');
                }
                let obj = Object.assign({}, this.tkForm);
                console.log(this.tkForm);
                obj.data.price = obj.price;
                obj.data = JSON.stringify([obj.data]);
                this.isBtn2 = true;
                let { code, data } = await this.$Http.returnOrders(obj);
                this.isBtn2 = false;
                if (code === 10000) {
                    this.$message.success('退款成功');
                    this.getOrderInfo(this.form.id);
                    this.dialogVisible = false;
                    // this.utils.backPage()
                }
            },
            rtUser(id, item) {
                if (this.userList && id) {
                    for (let i of this.userList) {
                        if (i.id == id) {
                            return i.name + '-' + (i.position?.name || '无');
                        }
                    }
                }
            },
            async getStaff() {
                let { code, data } = await this.$Http.getStaff({
                    is_all: 1,
                    status: 1,
                });
                if (code) {
                    this.userList = data;
                }
            },
            async getOrderInfo(id) {
                this.loading = true;
                let { code, data } = await this.$Http.getOrders({ id });
                this.loading = false;
                if (code === 10000) {
                    data.consumption = data.goods.concat(data.project);
                    //退款列表
                    data.refundList = [];
                    data.consumption.forEach((e) => {
                        // 总金额
                        e.money = (Number(e.price) * Number(e.number)).toFixed(2);
                        //折扣价
                        e.discountPrice = (e.price - e.price * (Number(e.discount_rate) / 10)).toFixed(2);
                        if (e.return_money && e.return_status != 0) {
                            data.refundList.push(e);
                        }
                    });
                    this.form = data;
                    this.goodsType = data.type;
                    this.orderType = data.status;
                    this.$forceUpdate();
                }
            },
            tk(row) {
                console.log(this.goodsType, 'this.goodsType');
                if (this.orderType == 1 || this.form.old_status == 1) {
                    this.dialogVisible = true;
                    this.tkForm.orders_id = this.form.id;
                    let { id, type, number, price } = row;
                    if (row.goods_id) {
                        type = 2;
                    } else if (row.project_id) {
                        type = 1;
                    }
                    price = this.form.paid_amount;
                    this.tkMaxPrice = price;
                    this.tkForm.price = price;
                    this.tkForm.data = {
                        id,
                        type,
                        number,
                        price,
                    };
                } else {
                    this.utils.goUrl('/orderRefund?id=' + this.form.id);
                }
            },
            subitm() {},
            dialogBeforeClose() {
                this.dialogVisible = false;
            },
        },
    };
</script>

<style>
    .disabled .el-upload--picture-card {
        display: none !important;
    }
</style>
<style lang="scss" scoped>
    :v-deep {
    }
    .iconfont {
        font-size: 24px;
        line-height: 40px;
        cursor: pointer;
    }
    .icon-xuanzhong {
        font-size: 22px;
        color: #409eff;
    }
    .orderStatus {
        padding: 40px 40px;
        display: flex;
        align-items: center;

        .left_order_status {
            display: flex;
            align-items: center;

            > span {
                margin-left: 30px;
                font-size: 22px;
                color: red;
            }
        }

        .right_money {
            margin-left: auto;
            display: flex;
            align-items: center;

            > div {
                display: flex;
            }

            > div:first-child {
                margin-right: 40px;
                color: red;
            }
        }
    }

    .tit {
        margin: 20px 0;
        font-size: 16px;
        font-weight: 700;
    }

    .money {
        display: flex;
        flex-direction: column;

        > div {
            padding: 0 40px;
            margin-top: 10px;
            text-align: right;
        }
    }

    .line {
        margin: 20px 0;
        margin-bottom: 40px;
        height: 1px;
        background-color: rgba($color: #000000, $alpha: 0.2);
    }

    .dialog_tit {
        padding-bottom: 10px;
        border-bottom: 1px solid rgba($color: #000000, $alpha: 0.2);
    }
    .vs-span-empty {
        span {
            margin-right: 5px;
        }
    }
</style>
